<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <link rel="stylesheet" href="./css/login.css">
</head>

<body>
    <div id="app">
        <div class="box">
            <p>登录</p>

            <div class="input-box">
                <div class="image-box">
                    <img src="./images/userName.png" alt="">
                </div>
                <el-input placeholder="请输入账号" v-model="loginForm.userName" clearable>
                </el-input>
            </div>

            <div class="input-box">
                <div class="image-box">
                    <img src="./images/password.png" alt="">
                </div>
                <el-input placeholder="请输入密码" v-model="loginForm.password" clearable>
                </el-input>
            </div>

            <div class="login">
                <el-button @click="login" class="login" type="success">登录</el-button>
            </div>
        </div>

        <el-dialog title="登录验证" :visible.sync="picCode.showFlag" width="70vw" modal center append-to-body>
            <div class="pic_box">
                <img @click="getPicCode" :src="picCode.picCodeUrl" alt="">
                <el-input placeholder="请输入图形验证码" v-model="picCode.picCode" clearable>
                </el-input>
            </div>
            <div class="pic_button">
                <el-button @click="chickPicCode" style="width: 100%;"  type="success">确定</el-button>
            </div>
        </el-dialog>
    </div>
</body>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="./js/axiosUtil.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                picCode: {
                    showFlag: false,
                    flag: false,
                    picCodeUrl: '',
                    picCode: '',
                    uuid: ''
                },
                loginForm: {
                    picCode: '',
                    uuid: '',
                    userName: '',
                    password: ''
                },

            }
        },
        methods: {
            login() {
                if (! /^[a-zA-Z0-9]{6,15}$/.test(this.loginForm.userName)) {

                    this.$message({
                        message: '账号格式6-15',
                        type: 'warning'
                    });
                    return
                } else if (! /^[a-zA-Z0-9]{6,15}$/.test(this.loginForm.password)) {

                    this.$message({
                        message: '密码格式6-15',
                        type: 'warning'
                    });
                    return
                } else if (! this.picCode.flag) {
                    this.openDialog()
                    return
                }

                this.loginForm.uuid = this.picCode.uuid
                this.loginForm.picCode = this.picCode.picCode

                axiosPost("/h5Login", this.loginForm).then(res => {
                    localStorage.setItem('token',res.data.data)
                	this.navGamePage()
                }).catch(error => {
                    this.$message({
                        message: error.data.msg,
                        type: 'warning'
                    });
                })


                this.picCode.picCode = ''
                this.picCode.showFlag = false
                this.picCode.flag = false
            },
            getPicCode() {
				this.picCode.picCodeUrl = ''
            
                axiosGet('/common/picCode').then(res => {
                    this.picCode.picCodeUrl = res.data.data.base64Str
					this.picCode.uuid = res.data.data.uuid
                }).catch(error => {
                    this.$message({
                        message: error.data.msg,
                        type: 'warning'
                    });
                })
			},
            chickPicCode() {
				if (this.picCode.picCode == null) {
                    this.$message({
                        message: "验证码格式错误",
                        type: 'warning'
                    });
					this.picCode.picCode = ''
					return
				}

                axiosGet(`/common/checkPicCode?picCode=${this.picCode.picCode}&uuid=${this.picCode.uuid}`).then(res => {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });

                    this.picCode.flag = true
                    this.picCode.showFlag = false
                }).catch(error => {
                    this.$message({
                        message: error.data.msg,
                        type: 'warning'
                    });
                    this.picCode.picCode = ""
                })
			},
            openDialog(){
                this.picCode.showFlag = true
                this.getPicCode()
            },
            navGamePage(){
                location.href = '/home.html'
            }
        },
        mounted() {
        }
    })
</script>

</html>